<template>
    <yd-layout class="column flex cart">
      <div slot = "navbar" class = "flex middle header">
        <div class="f1 title">购物车</div>
        <div class="more">
          <span class="edit" @click = 'edit'>{{ editFlag ? '完成' : '编辑' }}</span>
          <yd-icon name="share3" size = ".3rem" color = "#333" v-show = "!editFlag"></yd-icon>
        </div>
      </div>
      <div slot = "navbar" class="cart_con">
        共计35件商品
        <div class="cart_title">
          公益商城
        </div>
      </div>
      <div class="f1 cart_comm">
        <div v-for = '(item, index) in cartComm' :key = 'index' class = 'comm_li' @click.self = 'select(item, index)'>
          <radio class="inline-block middle" :select = "item.num > 0"></radio>
          <box :bgImg = 'item.imgSrc' class = 'inline-block middle comm_logo'></box>
          <div class = "inline-block top comm_con">
            <div class="text-hidden title"><span class="tip">{{ item.state | commState }}</span><span class = "service_name">{{ item.serviceName }}</span>{{ item.commName }}</div>
            <div class="more">净含量： {{ item.content }} <span>{{ item.storeNum }}</span></div>
            <div class="price">{{ item.exchangeIntegral }}</div>
          </div>
          <div class="inline-block bottom input_number">
            <spinner :min="0" v-model ="item.num" width = "1.16rem" @input = 'change'></spinner>
          </div>
        </div>
      </div>
      <yd-flexbox class = 'cart_bottom' slot = "tabbar"  v-show = '!editFlag'>
        <yd-flexbox-item>
          <span  @click= 'selectAll'>
            <radio class = 'radio' :select = "election"></radio>
            全选
          </span>
          <span class = "total">合计</span>
          {{ total }}
        </yd-flexbox-item>
        <div class = "btn">去结算</div>
      </yd-flexbox>
      <yd-flexbox class = 'cart_bottom' slot = "tabbar" v-show = 'editFlag'>
        <span  @click= 'selectAll'>
            <radio class = 'radio' :select = "election"></radio>
            全选
          </span>
        <yd-flexbox-item class = 'text-right'>
          <div class="inline-block middle tag active" @click = 'show = true'>快速清理</div>
          <div class="inline-block middle tag">移入收藏夹</div>
          <div class="inline-block middle tag">删除</div>
        </yd-flexbox-item>
      </yd-flexbox>
      <yd-popup v-model="show" position="bottom" width="100%">
        <div class="column flex prop">
          <div class="f1 prop_con">
            <h2 class="text-center">快速清理</h2>
            <div class="text-center desc">现有12件商品，购物车容量上线为100件</div>
            <div class="comm_con" v-for = '(item, index) in commCon' :key = "index">
              <div class="title" @click = 'selectComm(item, index)'><radio class = "radio" :select = "item.flag"></radio>{{ item.title }}</div>
              <grid class="flex" gutter = '.1rem'>
                <div class = 'tk-grid-3' v-for = "(it, k) in item.comm" :key = "`${index}${k}`" @click = "selectAllComm(it, item)">
                  <box :bgImg = "it.imgSrc" class = "comm_logo">
                    <radio :select.sync = "it.flag" class = "radio"></radio>
                  </box>
                </div>
              </grid>
            </div>
          </div>
          <div class="average flex bottom">
            <div class="btn" @click = 'show = false'>移入收藏夹</div>
            <div class="btn active" @click = 'deleComm'>删除</div>
          </div>
        </div>
      </yd-popup>
    </yd-layout>
</template>
<script>
import { commity } from '@/config/filters'
export default {
  name: 'cart',
  data () {
    return {
      cartComm: [],
      total: '0',
      editFlag: false,
      show: false,
      commCon: []
    }
  },
  filters: {
    commState (opt) {
      return commity[opt]
    }
  },
  created () {
    this.init()
  },
  computed: {
    election: {
      get () {
        return !this.cartComm.find(item => {
          return item.num <= 0
        })
      },
      set (val) {
        if (val) {
          this.cartComm = this.cartComm.map(item => {
            if (item.num === 0) {
              item.num = 1
            }
            return item
          })
        } else {
          this.cartComm = this.cartComm.map(item => {
            item.num = 0
            return item
          })
        }
      }
    }
  },
  methods: {
    init () {
      this.commCon = [{
        title: '半年前加入购物车',
        comm: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }, {
        title: '30天前加入购物车',
        comm: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }, {
        title: '7天前加入购物车',
        comm: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }, {
        title: '7天内加入购物车',
        comm: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }]
      this.commCon = this.commCon.map(item => {
        item.flag = false
        item.comm = item.comm.map(it => {
          it.flag = false
          return it
        })
        return item
      })
      this.cartComm = [{
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        state: '0',
        serviceName: '少先队',
        commName: '绿心奇异果超市',
        content: '60-80g',
        storeNum: '30枚',
        exchange: '69.00',
        integral: '5000'
      }]
      this.cartComm = this.cartComm.map((item, index) => {
        item.exchangeIntegral = (item.exchange ? `￥${item.exchange}` : '') + (item.integral ? `+ ${item.integral}积分` : '')
        item.num = 0
        return item
      })
    },
    selectAllComm (it, item) {
      it.flag = !it.flag
      if (!it.flag) {
        item.flag = false
      } else {
        let index = item.comm.findIndex(it => {
          return !it.flag
        })
        item.flag = index === -1
      }
      this.$forceUpdate()
    },
    change () {
      let total = 0
      let totalIntegral = 0
      this.cartComm.forEach(item => {
        if (item.exchange) {
          total += item.num * window.parseInt(item.exchange)
        }
        if (item.integral) {
          totalIntegral += item.num * item.integral
        }
      })
      this.total = (total ? '￥' + total : '') + ' ' + (totalIntegral ? totalIntegral + '积分' : '')
    },
    select (opt, index) {
      if (opt.num > 0) {
        opt.num = 0
      } else if (opt.num === 0) {
        opt.num = 1
      }
      this.$set(this.cartComm, index, opt)
      this.change()
    },
    selectAll () {
      this.election = !this.election
      this.change()
    },
    selectComm (opt, index) {
      opt.flag = !opt.flag
      opt.comm = opt.comm.map(item => {
        if (opt.flag) {
          item.flag = true
        } else {
          item.flag = false
        }
        return item
      })
      this.$set(this.commCon, index, opt)
    },
    edit () {
      this.editFlag = !this.editFlag
    },
    deleComm () {
      let commCon = []
      this.commCon.forEach(item => {
        commCon = commCon.concat(item.comm.filter(function (it) {
          return it.flag
        }))
      })
      console.log(commCon)
      // this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .cart{
    height: 100%;
    .header{
      padding: .2rem;
      .title {
        color: #333;
        font-size: 1.2em;
      }
      .more{
        .edit{
          margin: 0 .3rem;
          color: rgb(153, 153, 153);
        }
      }
    }
    .cart_con{
      padding: 0 .2rem;
      box-sizing: border-box;
      .cart_title{
        padding: .1rem 0;
      }
    }
    .cart_comm{
      padding:0 .2rem;
      overflow-y: auto;
      .comm_li{
        font-size: 0;
        border: 1px solid #ddd;
        margin: .3rem 0;
        padding: .2rem;
        box-sizing: border-box;
        .comm_logo{
          width: 1.34rem;
          margin-left: .1rem;
        }
        .comm_con{
          width: calc(100% - 3rem);
          padding-left: .2rem;
          .title{
            .tip{
              background-color: $color-primary;
              color: #fff;
              padding: .1rem .2rem;
              display: inline-block;
              vertical-align: baseline;
              border-radius: 1rem;
              margin: 0 .1rem;
              font-size: small;
            }
            .service_name{
              margin: 0 .1rem;
            }
          }
          .more{
            margin: .1rem 0;
            color: #666;
          }
          .price{
            color: $color-primary;
          }
        }
        .input_number{
          width: 1.16rem;
        }
      }
    }
    .cart_bottom{
      padding-left: .2rem;
      background-color: #eee;
      .radio{
        width: 1.2em;
        height: 1.2em;
        color: #333;
        margin-right: .1rem;
      }
      .total{
        margin: 0 .1rem 0 .3rem;
      }
      .btn{
        width: 2.16rem;
        background-color: $color-primary;
        color: #fff;
        height: .7rem;
        text-align: center;
        line-height: .7rem;
      }
      .tag{
        border-radius: 2rem;
        margin: .1rem .2rem .1rem 0;
        border: 1px solid #ddd;
        padding: .1rem .2rem;
        &.active{
          border-color: $color-primary;
          color: $color-primary;
        }
      }
    }
    .prop{
      height: 10.44rem;
      .prop_con{
        padding: .1rem;
        box-sizing: border-box;
        overflow-y: auto;
        .desc{
          margin: .1rem 0;
          color: #999;
        }
      }
      .comm_con{
        margin-bottom: .3rem;
        .title{
          margin-bottom: .2rem;
          .radio{
            margin-right: .1rem;
          }
        }
        .comm_logo{
          .radio{
            position: absolute;
            bottom: .1rem;
            right: .1rem;
            z-index: 2;
            border-color: #fff;
          }
        }
        &:last-child{
          margin-bottom: 0;
        }
      }
      .bottom {
        .btn{
          height: 0.72rem;
          background-color: #eee;
          text-align: center;
          line-height: .72rem;
          &.active{
            background-color: $color-primary;
            color: #fff;
          }
        }
      }
    }
  }
</style>
